import { nextTick } from 'vue'
import * as echarts from 'echarts'
import { onBeforeUnmount } from 'vue'
import { onMounted, ref } from 'vue'
import {dpcontSorgInfo} from "@/api/spotCheck/spotCheck";

/**
 * 社会组织风险预警分类
 */
export function useOrganizationChart() {
  let myChart8: any
  let myChart7: any
  let myChart6: any
  onMounted(() => {
    createWaringCharts()
  })

  onBeforeUnmount(() => {
    window.addEventListener('resize', resize)
  })
  const days = ref(7)
  function createWaringCharts() {
    dpcontSorgInfo({day: days.value}).then(res=>{
      const v0 = res.data.cancleNum || 0
      const v1 = res.data.cancleNum || 0
      const v2 = res.data.addNum || 0
      const v3 = res.data.changeNum || 0

      const myChart6 = echarts.init(document.getElementById('echarts6'))
      const option6 = {
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#0088cc',
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: v1,
                name: '新增会员',
                label: {
                  normal: {
                    formatter: v1 + '',
                    textStyle: {
                      fontSize: 20,
                      color: '#fff'
                    }
                  }
                }
              },

            ]
          }
        ]
      }

      const myChart7 = echarts.init(document.getElementById('echarts7'))
      const option7 = {
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#fccb00',
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: v2,
                name: '新增领卡会员',
                label: {
                  normal: {
                    formatter: v2 + '',
                    textStyle: {
                      fontSize: 20,
                      color: '#fff'
                    }
                  }
                }
              }
            ]
          }
        ]
      }

      const myChart8 = echarts.init(document.getElementById('echarts8'))
      const option8 = {
        series: [
          {
            type: 'pie',
            radius: ['70%', '80%'],
            color: '#62b62f',
            label: {
              normal: {
                position: 'center'
              }
            },
            data: [
              {
                value: v3,
                name: '女性客户',
                label: {
                  normal: {
                    formatter: v3 + '',
                    textStyle: {
                      fontSize: 20,
                      color: '#fff'
                    }
                  }
                }
              }
            ]
          }
        ]
      }

      nextTick(() => {
        window.addEventListener('resize', resize)
        myChart6.setOption(option6)
        myChart7.setOption(option7)
        myChart8.setOption(option8)
      })
    })


  }

  function resize() {
    setTimeout(() => {
      myChart6?.resize()
      myChart7?.resize()
      myChart8?.resize()
    }, 200)
  }
}
